<template>
	<view class="page-content">
		<view class="bg_fff pd-20">
			<view class="incomeInfo pd-20 display_col_center">
				<view class="display_row_btn_center" style="flex:2;width: 100%;">
					<view class="display_row_btn_center income">
						<view class="display_col_center">
							<view class="now">
								<text>￥</text>
								<text>{{collect?collect.money.can:0}}</text>
							</view>
							<text class="c_999999 f_24">可提现收益</text>
						</view>
						<view class="display_col_center" style="margin-left: 20rpx;">
							<view class="pre">
								<text>￥</text>
								<text>{{collect?collect.money.pre:0}}</text>
							</view>
							<text class="c_999999 f_24">上次提现收益</text>
						</view>
					</view>
					<view class="c_ffffff incomeBtn f_28" @click="goPage('/pages/center/withdrawal','navigateTo')">
						申请提现
					</view>
				</view>
				<u-line direction="row" color="#999999" dashed margin="10rpx 0rpx"></u-line>
				<view class="de_income">
					<view style="flex: 2;justify-content: space-around;" class="display_row_btn_center">
						<view class="display_col_center" style="flex: 1;">
							<view class="pre">
								<text>￥</text>
								<text style="font-weight: 600;">{{collect?collect.totle.totle:0}}</text>
							</view>
							<text class="c_999999 f_24">总收益</text>
						</view>
						<u-line direction="col" color="#999999" margin="0rpx 10rpx" length="60%"></u-line>
						<view class="display_col_center" style="flex: 1;">
							<view class="pre">
								<text>￥</text>
								<text style="font-weight: 600;">{{collect?collect.totle.mine:0}}</text>
							</view>
							<text class="c_999999 f_24">我的收益</text>
						</view>
					</view>
					<view style="flex: 1;">
						<view class="display_col_center">
							<view class="pre">
								<text>￥</text>
								<text style="font-weight: 600;">{{collect?collect.totle.group:0}}</text>
							</view>
							<text class="c_999999 f_24">团队收益</text>
						</view>
					</view>
				</view>
				<view class="de_income mt-20">
					<view style="flex: 2;justify-content: space-around;" class="display_row_btn_center">
						<view class="display_col_center" style="flex: 1;">
							<view class="pre">
								<text>￥</text>
								<text style="font-weight: 600;">{{collect?collect.today.totle:0}}</text>
							</view>
							<text class="c_999999 f_24">今日收益</text>
						</view>
						<u-line direction="col" color="#999999" margin="0rpx 10rpx" length="60%"></u-line>
						<view class="display_col_center" style="flex: 1;">
							<view class="pre">
								<text>￥</text>
								<text style="font-weight: 600;">{{collect?collect.today.mine:0}}</text>
							</view>
							<text class="c_999999 f_24">今日我的收益</text>
						</view>
					</view>
					<view style="flex: 1;">
						<view class="display_col_center">
							<view class="pre">
								<text>￥</text>
								<text style="font-weight: 600;">{{collect?collect.today.group:0}}</text>
							</view>
							<text class="c_999999 f_24">今日团队收益</text>
						</view>
					</view>
				</view>
				<view class="de_income mt-20" v-if="otherConfig!=null&&otherConfig.font_more_list==1">
					<view style="flex: 2;justify-content: space-around;" class="display_row_btn_center">
						<view class="display_col_center" style="flex: 1;">
							<view class="pre">
								<text>￥</text>
								<text style="font-weight: 600;">{{collect?collect.totle.group_totle:0}}</text>
							</view>
							<text class="c_999999 f_24">团队订单金额</text>
						</view>
						<u-line direction="col" color="#999999" margin="0rpx 10rpx" length="60%"></u-line>
						<view class="display_col_center" style="flex: 1;">
							<view class="pre">
								<text>￥</text>
								<text style="font-weight: 600;">{{collect?collect.today.day_group_totle:0}}</text>
							</view>
							<text class="c_999999 f_24">今日团队订单金额</text>
						</view>
					</view>
					<view style="flex: 1;">
						<view class="display_col_center">
							<view class="pre">
								<text>￥</text>
								<text style="font-weight: 600;">{{collect?collect.date.month_group:0}}</text>
							</view>
							<text class="c_999999 f_24">本月团队订单金额</text>
						</view>
					</view>
				</view>
			</view>
			<view class="display_row_btn_center mt-20">
				<picker @change="typeChange" :value="subData.type" :range="array" range-key="text">
					<view class="typebox">{{array[subData.type].text}}</view>
				</picker>
				<uni-datetime-picker v-model="time" type="daterange" @change="timeChange" />
			</view>
		</view>

		<u-list v-if="dataList.length" @scrolltolower="listScrollTolower" :customStyle="{
			padding:'0 2%',
			boxSizing:'border-box',
			marginBottom: '40px',
			paddingTop: '20rpx'
			}">
			<view class="bg_fff mb-20 itemBox" @click="clickListItem(dataItem)" v-for="(dataItem, index) in dataList"
				:key="index">
				<view class="pd-20 display_row_btn_center" style="padding-right: 0;">
					<view class="itemBaseBox">
						<u-image :src="dataItem.mission_cover" width="100rpx" height="100rpx"></u-image>
						<view class="itemBase f_24">
							<view class="display_row_btn_center pr-20">
								<text class="c_333333 title">{{dataItem.mission_name||""}}</text>
								<text class="c_C62B2C">查看></text>
							</view>
							<view class="display_row_btn_center" style="margin-right: 10rpx;">
								<view class="c_333333 mt-8">当前单量：<text
										class="c_C62B2C f_28">{{dataItem.ototal||0}}</text>
								</view>
								<view class="c_333333 mt-8">当前成单量：<text
										class="c_C62B2C f_28">{{dataItem.socounttotal||0}}</text>
								</view>
								<view class="c_333333 mt-8">当前收益：<text
										class="c_C62B2C f_28">￥{{dataItem.soamount||0}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-list>
		<u-empty mode="list" v-else :customStyle="{flex:'1'}"></u-empty>

		<u-tabbar :value="value" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" activeColor="#C62B2C"
			inactiveColor="#707070">
			<u-tabbar-item text="首页" @click="clickBar1" name="bar1">
				<image class="u-page__item__slot-icon" slot="active-icon" src="../../static/img/tabbar/homeactive.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../static/img/tabbar/home.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="发布" @click="clickBar2" name="bar2">
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="../../static/img/tabbar/publishactive.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../static/img/tabbar/publish.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="动态" @click="clickBar3" v-if="showXt" name="bar3">
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="../../static/img/tabbar/courseactive.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../static/img/tabbar/course.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="收益" @click="clickBar5" name="bar5">
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="../../static/img/tabbar/incomeactive.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../static/img/tabbar/income.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="我的" @click="clickBar4" name="bar4">
				<image class="u-page__item__slot-icon" slot="active-icon" src="../../static/img/tabbar/mineactive.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../static/img/tabbar/mine.png">
				</image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {
		getOrders,
		getOrderCollect,
		getOtherConfig,
		getConfig,
		getIncomeList
	} from '@/config/api.js'

	function getDate(type) {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}

	export default {
		data() {
			return {
				showXt: false,
				value: 'bar5',
				array: [{
					id: 1,
					text: "我的"
				}, {
					id: 2,
					text: "团队"
				}],
				time: [getDate({
					format: true
				}), getDate({
					format: true
				})],
				subData: {
					type: 0,
					create_at: "",
					page: 1,
					pages: 1
				},
				collect: null,
				dataList: [],
				userInfo: uni.getStorageSync("UserInfo"),
				otherConfig: null
			}
		},
		onLoad() {
			var date = getDate({
				format: true
			});
			this.time = [date, date];
			this.subData.create_at = date + " - " + date;
		},
		onShow() {
			this.dataList = [];
			this.subData.page = 1;
			this.subData.pages = 1;
			this.getcofg();
			this.getList();
			this.getCollect();
		},
		methods: {
			clickListItem(data) {
				uni.navigateTo({
					url: "/pages/center/order?id=" + data.mission_id + "&type=" + this.subData.type +
						"&create_at=" + this.subData.create_at,
				})
			},
			getcofg() {
				getOtherConfig().then(res => {
					this.otherConfig = res;
					if (res.font_more_list == 1) {
						this.array.push({
							id: 3,
							text: "更多"
						});
					}
				}).catch((err) => {

				});
				getConfig().then(res => {
					if (res.value == 1) {
						this.showXt = true
					} else {
						this.showXt = false
					}
				})
			},
			goPage(url) {

				if (this.userInfo.username == "" || this.userInfo.headimg == "" || this.userInfo.phone == "") {
					uni.showModal({
						title: '提示',
						content: '未完善信息',
						confirmText: '完善',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/center/info"
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})

					return;
				}

				uni.navigateTo({
					url: url
				})
			},
			typeChange(e) {
				this.dataList = [];
				this.subData.page = 1;
				this.subData.pages = 1;
				this.subData.type = e.detail.value;
				this.getList();
			},
			timeChange(e) {
				this.dataList = [];
				this.subData.page = 1;
				this.subData.pages = 1;
				this.subData.create_at = e[0] + " - " + e[1];
				this.getList();
			},
			getList() {
				getIncomeList(this.subData).then((res) => {
					this.dataList = this.dataList.concat(res.list);
					this.subData.pages = res.page.pages;
					this.subData.page++;
				}).catch((err) => {

				});
			},
			listScrollTolower() {
				if (this.subData.page <= this.subData.pages) {
					this.getList();
				}
			},
			getCollect() {
				getOrderCollect().then(res => {
					this.collect = res;
				})
			},
			clickBar1() {
				// this.value = 'bar1';
				uni.switchTab({
					url: '/pages/tabbar/tabbar-1/tabbar-1'
				})
			},
			clickBar2() {
				// this.value = 'bar2';
				uni.switchTab({
					url: '/pages/tabbar/tabbar-2/tabbar-2'
				})
			},
			clickBar3() {
				// this.value = 'bar3';
				uni.switchTab({
					url: '/pages/tabbar/tabbar-3/tabbar-3'
				})
			},
			clickBar4() {
				// this.value = 'bar4';
				uni.switchTab({
					url: '/pages/tabbar/tabbar-4/tabbar-4'
				})
			},
			clickBar5() {
				// this.value = 'bar4';
				uni.switchTab({
					url: '/pages/center/income'
				})
			},
		}
	}
</script>

<style scoped>
	.incomeInfo {
		background: url("https://dtkj-qnyimg.diankuai.com/%E6%88%91%E7%9A%84/Layer%201%20%E6%8B%B7%E8%B4%9D.png") no-repeat center center;
		background-size: 100% 100%;
	}

	.incomeBtn {
		padding: 10rpx 20rpx;
		background-color: #131F4F;
		border-radius: 10rpx;
		width: 120rpx;
	}

	.now {
		font-size: 40rpx;
	}

	.now>text:last-child {
		font-size: 60rpx;
		font-weight: 600;
	}

	.pre {
		font-size: 30rpx;
	}

	.pre>text:last-child {
		font-size: 40rpx;
	}

	.income {
		justify-content: flex-end;
		align-items: flex-end;
	}

	.de_income {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.timebox {
		display: flex;
		flex-direction: row;
		height: 60rpx;
		border: 1px solid #999;
		border-radius: 10rpx;
	}

	.timebox>text {
		height: 100%;
		line-height: 60rpx;
		text-align: center;
	}

	.typebox {
		box-sizing: border-box;
		border-radius: 4px;
		border: 1px solid #e5e5e5;
		height: 37px;
		width: 120rpx;
		text-align: center;
		line-height: 35px;
		margin-right: 20rpx;
	}

	/deep/ .typebox {
		color: #666;
	}

	.u-page__item__slot-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.itemBox {
		width: 100%;
		border-radius: 20rpx;
	}

	.itemBaseBox {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex: 6;
	}

	.itemBase {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin-left: 20rpx;
		width: 100%;
	}

	.title {
		font-size: 36rpx;
		font-weight: 600;
	}

	.status {
		border: 1px solid #C62B2C;
		border-radius: 10rpx;
		padding: 10rpx;
	}
</style>
